<template>
    <div class="validate-input">
        <input :type="type" name="" v-model="value" @focus="isError = false" :placeholder="ph" :class="{'input-error': isSubmit && isError}">
        <p class="hint" v-if="isSubmit && isError"><slot></slot></p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            value: this.val,
            isError: false
        }
    },
    props: {
        type: String,
        ph: String,
        isSubmit: Boolean,
        val: String
    },
    methods: {
        validateEmail () {
            let regexp = new RegExp('^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$')
            if (!regexp.test(this.value)) {
                this.isError = true
                this.$emit('validateError')
            }
        },
        validatePassword () {

        }
    },
    watch: {
        isSubmit: function (val) {
            if (!val) { return false }
            switch (this.type) {
            case 'email':
                this.validateEmail(this.value)
                break

            default:
                break
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
div.validate-input
    .input-error
        border-color red
    .hint
        color red
        font-size 12px
</style>
